<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ include file="../session.jsp"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<%@ include file="../head.jsp"%>${alert}
<style>
	.box1 {
		padding-right: 5px;
	}
	.box2 {
		padding-left: 5px;
	}
	.page-header {
		margin-top: -30px;
	}
	#bannerImg {
		margin-top: 5px;
	}
</style>
<link rel="stylesheet" type="text/css" href="assets/css/lightbox.css" />
</head>
<body>
	<div class="container">
		<div class="page-header">
			<h2>배너 관리 - <small>${brandTitle}</small></h2>
		</div>
	
		<div class="table-responsive">
			<form id="insertBrandBanner" class="form-horizontal" role="form" method="post" action="brandBanner.do" enctype="multipart/form-data">
				
				<input type="hidden" name="id" value="${id}"/>
				<input type="hidden" name="name" value="${brandTitle}"/>
				<input type="hidden" name="action_type" value="insert"/>
				
				<table class="table table-bordered">
					<thead>
						<tr class="success">
							<th class="text-center col-md-1">순서</th>
							<th class="text-center col-md-2">배너명</th>
							<th class="text-center col-md-3">이미지 <span class="text-danger">(640x260)</span></th>
							<th class="text-center col-md-5">링크</th>
							<th class="text-center col-md-1">등록</th>
						</tr>
					</thead>
					<tbody>
						<tr class="text-center">
							<td class="col-md-1"><input type="number" class="form-control" name="insertSortKey"/></td>
							<td class="col-md-2"><input type="text" class="form-control" name="insertBannerTitle"/></td>
							<td class="col-md-3"><input type="file" class="form-control" name="bannerImg"/></td>
							<td class="col-md-5">
								<div class="row">
									<div class="col-md-5 box1">
										<select name="insertLinkType" class="form-control">
											<option>- 링크종류 -</option>
											<c:forEach items="${eventType}" var="list">
												<option value="${list.idCommon}">${list.commonText}</option>
											</c:forEach>
										</select>
									</div>
									<div class="col-md-7 box2">
										<input type="text" class="form-control" name="insertLinkCode" placeholder="링크내용을 입력하세요"/>
									</div>
								</div>
							</td>
							<td class="col-md-1"><button type="submit" class="btn btn-primary btn-block btn-sm">등록</button></td>
						</tr>
					</tbody>
				</table>
			</form>
		</div>
		
		<hr/>
		
		<div class="table-responsive">
			<span class="pull-left" style="margin-bottom:10px;">등록 : ${page.totalArticleCount}건 / 활성 : ${display}건 / 비활성 : ${unDisplay}</span>
			<table class="table table-striped table-hover">
				<thead>
					<tr class="warning row">
						<th class="text-center col-md-1">노출</th>
						<th class="text-center col-md-1">순서</th>
						<th class="text-center col-md-2">배너명</th>
						<th class="text-center col-md-5">이미지</th>
						<th class="text-center col-md-2">링크</th>
						<th class="text-center col-md-1">옵션</th>
					</tr>
				</thead>
				<tbody>
					<c:forEach items="${brandBanner}" var="list">
						<form id="updateBrandBanner${list.idBrandBanner}" role="form" method="post" action="brandBanner.do" enctype="multipart/form-data"></form>
						<input type="hidden" name="id" value="${id}" form="updateBrandBanner${list.idBrandBanner}"/>
						<input type="hidden" name="name" value="${brandTitle}" form="updateBrandBanner${list.idBrandBanner}"/>
						<input type="hidden" name="action_type" value="update" form="updateBrandBanner${list.idBrandBanner}"/>
						
						<input type="hidden" name="idBrandBanner" value="${list.idBrandBanner}" form="updateBrandBanner${list.idBrandBanner}"/>
						<input type="hidden" name="page" value="${page.nowPage}" form="updateBrandBanner${list.idBrandBanner}"/>
						<tr class="text-center row">
							<td class="col-md-1">
								<input type="checkbox" name="display${list.idBrandBanner}" value="1" <c:if test="${list.isDisplay == 1}">checked</c:if> form="updateBrandBanner${list.idBrandBanner}"/>
							</td>
							<td class="col-md-1">
								<input type="number" class="form-control" name="sortKey${list.idBrandBanner}" value="${list.sortKey}" form="updateBrandBanner${list.idBrandBanner}"/>
							</td>
							<td class="col-md-2">
								<input type="text" class="form-control" name="bannerTitle${list.idBrandBanner}" value="${list.bannerTitle}" form="updateBrandBanner${list.idBrandBanner}"/>
							</td>
							<td class="col-md-5 text-left">
								<div class="row">
									<div class="col-md-6">
										<p class="form-control-static">
											<a href="download.jsp?${list.image}" data-lightbox="roadtrip" title="${list.bannerTitle}">
												<img src="download.jsp?${list.image}" class="img-thumbnail img-responsive"/>
											</a>
										</p>
									</div>
									<div class="col-md-6 small">
										<ul>
											<li>항번: ${list.image.idAttacheFile}</li>
											<li>원본 파일 이름: ${list.image.fileOrgName}</li>
											<li>파일 크기: ${list.image.fileSize}byte</li>
											<li>업로드된 파일 이름: ${list.image.fileSaveName}</li>
											<li>업로드된 폴더 경로: ${list.image.fileDir}</li>
											<li>파일 타입: ${list.image.fileType}</li>
										</ul>
										&nbsp;&nbsp;&nbsp;&nbsp;
										<button type="button" class="btn btn-sm" id="imgEdit${list.idBrandBanner}">변경</button>
										<br/><br/>
										<div id="imgDiv${list.idBrandBanner}"><input type="file" class="form-control" name="editImg${list.idBrandBanner}" form="updateBrandBanner${list.idBrandBanner}"/></div>
									</div>
								</div>
							</td>
							<td class="col-md-2">
								<select name="linkType${list.idBrandBanner}" class="form-control" form="updateBrandBanner${list.idBrandBanner}">
									<option>- 링크종류 -</option>
									<c:forEach items="${eventType}" var="clist">
										<option value="${clist.idCommon}" <c:if test="${list.bannerLinkType == clist.idCommon}">selected</c:if>>${clist.commonText}</option>
									</c:forEach>
								</select>
								<br/>
								<input type="text" class="form-control" name="linkCode${list.idBrandBanner}" value="${list.bannerLinkCode}" form="updateBrandBanner${list.idBrandBanner}"/>
							</td>
							<td class="col-md-1">
								<div class="row">
									<div class="col-md-12">
										<button type="submit" class="btn btn-info btn-block" form="updateBrandBanner${list.idBrandBanner}">저장</button>
									</div>
									<br/>
									<div class="col-md-12">
										<button type="button" id="deleteConfirm" class="btn btn-danger btn-block">삭제</button>
									</div>
								</div>
							</td>
						</tr>
					</c:forEach>
				</tbody>
			</table>
		</div>
		
		<div class="text-center">
			<ul class="pagination">

				<!-- 이전 그룹 -->
				<c:choose>
					<c:when test="${page.startPage > page.pageGroupCount}">
						<li><a href="brandBanner.do?page=${page.startPage-1}&id=${id}&name=${brandTitle}">&laquo;</a></li>
					</c:when>
					<c:otherwise>
						<li class="disabled"><a href="#">&laquo;</a></li>
					</c:otherwise>
				</c:choose>
				
				<!-- 페이지 번호 -->
				<c:forEach begin="${page.startPage}" end="${page.endPage}" step="1" var="now">
					<c:choose>
						<c:when test="${page.nowPage == now}">
							<li class="active"><a href="#">${now}</a></li>
						</c:when>
						<c:otherwise>
							<li><a href="brandBanner.do?page=${now}&id=${id}&name=${brandTitle}">${now}</a></li>
						</c:otherwise>
					</c:choose>
				</c:forEach>

				<!-- 다음 그룹 -->
				<c:choose>
					<c:when test="${page.endPage < page.lastGroupFirstPage}">
						<li><a href="brandBanner.do?page=${page.endPage+1}&id=${id}&name=${brandTitle}">&raquo;</a></li>
					</c:when>
					<c:otherwise>
						<li class="disabled"><a href="#">&raquo;</a></li>
					</c:otherwise>
				</c:choose>

			</ul>
		</div>
		
	</div>

	<script src="assets/js/jquery.js"></script>
	<script src="assets/js/bootstrap.min.js"></script>
	<!-- 형식검사 클래스 참조 -->
	<script src="assets/js/string.js"></script>
	<script src="assets/js/lightbox-2.6.min.js"></script>
	<script>
		$(function() {
			$("#insertBrandBanner").submit(function() {
				
				if (!$("input[name='insertSortKey']").val().isValue()) {
					alert("노출순서를 입력하세요.");
					$("input[name='insertSortKey']").focus();
					return false;
				}
				
				if (!$("input[name='insertSortKey']").val().isNumber()) {
					alert("노출순서는 숫자로만 입력이 가능합니다.");
					$("input[name='insertSortKey']").focus();
					return false;
				}
				
				if (!$("input[name='insertBannerTitle']").val().isValue()) {
					alert("배너명을 입력하세요.");
					$("input[name='insertBannerTitle']").focus();
					return false;
				}
				
				var image = true;
				$("input[name='bannerImg']").each(function(idx, item) {
					if (!$(item).val().isValue()) {
						alert("사진을 추가하세요.");
						$(item).focus();
						image = false;
					}
				});
				if (!image) {
					return false;
				}
				
				if ($("select[name='insertLinkType'] > option:selected").index() < 1) {
					alert("링크종류를 선택하세요.");
					$("select[name='insertLinkType']").focus();
					return false;
				}
				
				if (!$("input[name='insertLinkCode']").val().isValue()) {
					alert("링크내용을 입력하세요.");
					$("input[name='insertLinkCode']").focus();
					return false;
				}
				
				if (!confirm("정말 등록하시겠습니까?")) {
					return false;
				}
			});
			
			<c:forEach items="${brandBanner}" var="list">
				$("#imgDiv${list.idBrandBanner}").hide();
				
				$("#imgEdit${list.idBrandBanner}").click(function() {
					$("input[name='editImg${list.idBrandBanner}']").replaceWith($("input[name='editImg${list.idBrandBanner}']").clone(true));
					$("#imgDiv${list.idBrandBanner}").toggle();
				});
				
				$("#updateBrandBanner${list.idBrandBanner}").submit(function() {
				
					if (!$("input[name='sortKey${list.idBrandBanner}']").val().isValue()) {
						alert("정렬순서를 입력하세요.");
						$("input[name='sortKey${list.idBrandBanner}']").focus();
						return false;
					}
					
					if (!$("input[name='sortKey${list.idBrandBanner}']").val().isNumber()) {
						alert("정렬순서는 숫자로만 입력이 가능합니다.");
						$("input[name='sortKey${list.idBrandBanner}']").focus();
						return false;
					}
					
					if (!$("input[name='bannerTitle${list.idBrandBanner}']").val().isValue()) {
						alert("배너명을 입력하세요.");
						$("input[name='bannerTitle${list.idBrandBanner}']").focus();
						return false;
					}
					
					if ($("select[name='linkType${list.idBrandBanner}'] > option:selected").index() < 1) {
						alert("링크종류을 선택하세요.");
						$("select[name='linkType${list.idBrandBanner}']").focus();
						return false;
					}
					
					if (!$("input[name='linkCode${list.idBrandBanner}']").val().isValue()) {
						alert("링크내용을 입력하세요.");
						$("input[name='linkCode${list.idBrandBanner}']").focus();
						return false;
					}
					
					if (!confirm("정말 수정하시겠습니까?")) {
						return false;
					}
				});
			</c:forEach>
			
			$("#updateConfirm").click(function() {
				if (!confirm("정말 저장하시겠습니까?")) {
					return false;
				}
			});
			
			$("#deleteConfirm").click(function() {
				if (!confirm("정말 삭제하시겠습니까?")) {
					return false;
				}
			});
		});
	</script>
</body>
</html>